<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>{{ title }}</h1>
    <p>由于传统的开发，是需要进行dom操作，将请求回来的数据进行字符串的拼接，然后在更新到页面上。</p>
    <p>vuejs可以实现数据驱动的，无需dom操作，那么我们正好可以利用该特性进行 数据的处理。 </p>
    <hr/>
    <div>
        <ul v-for="ele in newsList">
            <li>序号：{{ ele._id }}</li>
            <li>新闻标题：{{ ele.title }}</li>
            <li>新闻作者：{{ ele.author }}</li>
            <li>新闻流量量：{{ ele.viewCount }}</li>
        </ul>
    </div>

</div>

</body>
<script src="./lib/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'hi vuejs!',
            newsList: [], // vuejs data里面数据可以实现双向数据绑定，可以实现数据到视图的自动更新

        },
        created: function () {
            // 页面加载的时候就会自动触发
            // 这里可以发送网络请求
            let url = 'https://yw.52kfw.cn/api/news/flist?pageSize=100&cate_id=%E5%9B%BD%E5%AE%B6%E4%BA%8B%E5%AE%9E';
            var _this = this;
            // 发送网络请求，大家使用 ajax  或者 jquery 或者 axios 都可以
            $.ajax({
                url: url,
                dataType: 'json',
                success: function (obj) {

                    console.log(obj);
                    if (obj.statusCode == 200) {
                        var newsList = obj.data.list;
                        _this.newsList = newsList;


                    } else {
                        alert('系统繁忙！');
                    }

                }
            })

        }
    })
</script>

</html>
